<template>
  <div class="imgs-upload" style="display: block;height: 100%;">
    <div>
      <h2 style=" display: block;text-align: left;">{{ $route.query.bookName }}&nbsp;&nbsp;{{ $route.query.bookLang }}</h2>
      <h3>第&nbsp;&nbsp;{{currentIndex}} / {{ catalogCount }}卷&nbsp;&nbsp;{{ bookKidsForm.catalogName}}书影录入</h3>
    </div>
    <div style="display: block; width: 1200px; height: 500px; border: 1px dashed black; margin: 0 auto;">
      <!-- fileList: [], // 图片列表 -->
      <imgsUpload1 style="margin-top: 5px;" ref="imgsUpload1"></imgsUpload1>
      <!-- <imgsUpload v-model="bookKidsForm.imageList"></imgsUpload> -->
    </div>
    <div style="margin-top: 20px;">
      <el-button type="info" round v-show="currentIndex > 1" @click="prevSlide">上一卷</el-button>
      <el-button type="info" round @click="handleImgs">保存提交</el-button>
      <el-button type="info" round v-show="currentIndex < catalogCount" @click="nextSlide">下一卷</el-button>
    </div>

  </div>
</template>

<script>
import { getBookCatalog, handleCatalogImgs } from '@/api/book'
// import axios from 'axios'
export default {
  data () {
    return {
      bookKidsForm: {
        bookId: '', // 书目id
        catalogId: '0', // 最小划分单位id，如：总计有3卷，这是第一卷，则bookKids为0
        catalogName: '', // 最小单位名称
        ImageList: [] // 图片地址列表，包含了这一卷(章节)的所有书影图片地址
      },
      bookName: '',
      catalogCount: 0, // 一共有多少最小单位
      currentIndex: 1 // 当前第几卷

    }
  },
  async created () {
    // 从路由中获取参数值
    this.bookKidsForm.bookId = this.$route.query.bookId
    this.bookName = this.$route.query.bookName
    console.log(this.bookKidsForm.bookId, this.bookName)
    // 查询当前书的当前index目录名字和总目录数
    // const res = await getBookCatalog(this.bookKidsForm.bookId, this.bookName, this.currentIndex)
    const res = await getBookCatalog(this.bookKidsForm.bookId, this.bookName, this.currentIndex)

    console.log(res)
    if (res.code === 1) {
      this.catalogCount = res.data.tot
      this.bookKidsForm.catalogName = res.data.name
      this.bookKidsForm.id = res.data.id
      this.bookKidsForm.catalogId = res.data.catalogId
      // console.log(this.catalogCount, this.catalogName, this.bookKidsForm.id, this.bookKidsForm.catalogId)
    } else {
      this.$message.error('初始化失败')
    }
  },
  methods: {
    async  prevSlide () {
      // 重置子组件中的图片地址列表为空
      this.$refs.imgsUpload1.resetImages()
      if (this.currentIndex !== 0) {
        this.currentIndex--
        const res = await getBookCatalog(this.bookKidsForm.bookId, this.bookName, this.currentIndex)
        if (res.code === 1) {
          this.catalogCount = res.data.tot
          this.bookKidsForm.catalogName = res.data.name
          // this.bookKidsForm.bookId = res.data.id
          this.bookKidsForm.catalogId = res.data.catalogId
          this.bookKidsForm.ImageList = res.data.imgs
          // console.log(this.catalogCount, this.catalogName, this.bookKidsForm.id, this.bookKidsForm.catalogId)
        } else {
          this.$message.error('跳转失败……')
        }
      }
    },
    async  nextSlide () {
      // 重置子组件中的图片地址列表为空
      this.$refs.imgsUpload1.resetImages()
      if (this.currentIndex < this.catalogCount) {
        this.currentIndex++
        console.log(this.bookKidsForm.bookId, this.bookName, this.currentIndex)
        const res = await getBookCatalog(this.bookKidsForm.bookId, this.bookName, this.currentIndex)
        if (res.code === 1) {
          this.catalogCount = res.data.tot
          this.bookKidsForm.catalogName = res.data.name
          // this.bookKidsForm.bookId = res.data.id // 废弃的id
          this.bookKidsForm.catalogId = res.data.catalogId
          this.bookKidsForm.ImageList = [] // 置空操作
          // console.log(this.catalogCount, this.catalogName, this.bookKidsForm.id, this.bookKidsForm.catalogId)
        } else {
          this.$message.error('跳转失败……')
        }
      }
    },
    async handleImgs () {
      // 获取子组件中的地址合集
      this.bookKidsForm.ImageList = this.$refs.imgsUpload1.getImages()
      // 提交图片地址合集
      const res = await handleCatalogImgs(this.bookKidsForm.bookId, this.bookKidsForm.catalogId, this.bookKidsForm.ImageList)
      // console.log('bookKidsForm.bookId:' + this.bookKidsForm.bookId, 'bookKidsForm.catalogId:' + this.bookKidsForm.catalogId, 'ImageList.length:' + this.bookKidsForm.ImageList.length)
      if (res.code === 1) {
        this.$message.success(this.bookKidsForm.catalogName + '图片提交成功！')
        this.$refs.imgsUpload1.resetImages()
        this.nextSlide()
      } else {
        this.$message.error(this.bookKidsForm.catalogName + '图片提交失败……')
      }
    }

  }

}
</script>

<style>

</style>
